<template>
    <div style="border: 3px solid #000; margin: 10px;">
        <!-- 3 模板中直接使用-->
        我是Son组件 {{ title }}
        <input type="text" v-model="tvalue" />
        <button @click="handleClick">修改title</button>
    </div>
</template>

<script>
export default {
    name: 'TheSon',
    //2 子组件内部通过props接收
    props: ['title'],
    data() {
        return {
            tvalue: ''
        }
    },
    methods: {
        handleClick() {
            //e1 $emit触发事件 向父组件传递消息通知
            this.$emit('changeTitle', this.tvalue)
        }
    }


}
</script>

<style scoped>
.base-count {
    margin: 20px;
}
</style>